import { PureComponent } from 'react';
import { isNull, calcField } from '../../utils/helper';
import MAction from '../MAction/MAction';
import F2 from '@antv/f2/lib/index-all';
interface Props {
  list: any[],
  isMiNi?: any,
  color?: string,
  borderColor?: string,
  line?: any,
  animate?: any,
  tooltip?: {
    [k: string]: any
  },
  height?: any,
  event_key?: string
}
interface State {

}
export default class MiMiniArea extends PureComponent<Props, State> {
  private canvasId: any = Math.random() + new Date().getTime() + "";
  private chart: any;
  private wrapper: any;
  public state: State = {

  }
  componentWillReceiveProps(nextProps: Props) {
    let { list: oldList } = this.props;
    let { list: newList } = nextProps;
    if (!_.isEqual(oldList, newList)) {
      this.renderChart(newList);
    }
  }
  renderChart(data) {
    let { isMiNi = true } = this.props;
    let chart = this.chart;
    chart.clear();
    chart.source(data);
    chart.scale({
      x: {
        range: [0, 1]
      },
      y: {

      }
    });
    if (isMiNi) {// 如果是mini的时候的默认配置
      let { color = "", borderColor = "", line, animate } = this.props;
      line = isNull(line) || line == 1;
      animate = isNull(animate) || animate == 1;
      chart.axis('x', {
        line: null,
        grid: null,
        tickLine: null,
        label: null,
        labelOffset: -10
      });
      chart.axis('y', {
        line: null,
        grid: null,
        tickLine: null,
        label: null,
        labelOffset: -10
      });
      chart.tooltip({
        onShow: (ev) => {
          var items = ev.items;
          let { tooltip, list } = this.props;
          if (!isNull(tooltip)) {
            let { name, value } = tooltip ;
            if (name === null) {
              items[0].name = null;
            }
            else {
              if (!isNull(name)) {
                name = calcField(name, list);
                items[0].name = name;
              }
              else {
                //否则 就使用默认图表默认的
              }
            }

            if (!isNull(value)) {
              value = calcField(value, { value: items[0].value });
              items[0].value = value;
            }
          }
          // // items[0].name = "PM2.5";
          // items[0].name = null;
          // console.log(calcField("{{value}}", { value: items[0].value }))
          // // items[0].value = items[0].value + ' ug/m³';
        }
      })
      chart.area().position('x*y').color(color);
      if (line) {
        chart.line().position('x*y').color(borderColor);
      }
      if (!animate) {
        chart.animate(false);
      }
    }
    chart.render();
  }
  componentDidMount() {
    let { width } = this.wrapper.getBoundingClientRect();
    let { list, height = 100 } = this.props;
    if (isNull(height)) {
      height = window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618;
    }
    this.chart = new F2.Chart({
      id: this.canvasId,
      // width: window.innerWidth,
      width: width,
      height: height,
      pixelRatio: window.devicePixelRatio
    });
    this.renderChart(list);
  }
  render() {
    return (
      <div ref={e => this.wrapper = e}
        onClick={() => {
          MAction({ ...this.props }, this.props.event_key);
        }}>
        <div className="chart-wrapper" >
          <canvas id={this.canvasId} />
        </div>
      </div>
    )
  }
}

/*
var config ={
  "component_type":"mi-miniarea",
  "color":"",//图表颜色
  "borderColor":"",//图表边框的颜色
  "height":100,//图表的高度
  "line":1,//0|1 是否显示描边 默认1
  "animate":1,//0|1 是否显示动画 默认1
  "dataset_key":"",//数据源
  "componentStyle":{},
  "event_key":"",
  "tooltip":{
    "name":"{{xxx}}",
    "value":"{{value}} ug/m³"
  }
}

var data=[
  {x:1,y:12},
  {x:1,y:12},
  {x:1,y:12},
  {x:1,y:12},
  {x:1,y:12}
]

*/